<template>
  <div>
    <el-input
      v-if="bind.showFilter"
      style="padding: 10px 0; box-sizing: border-box"
      :placeholder="bind.placeholder"
      v-model="filterText"
      @keyup.enter.native="filters(filterText)"
    ></el-input>
    <el-tree
      ref="msuiTree"
      :data="data"
      :node-key="props.key"
      :current-node-key="currentNodeKey"
      :default-expanded-keys="key"
      :props="props"
      v-loading="loading"
      v-bind="bind"
      v-on="vOn"
      @check-change="handleCheckChange"
    >
      <div class="tree-current" slot-scope="{ node, data }">
        <slot v-if="$scopedSlots.tree" name="tree" :data="data" :node="node"></slot>
        <span v-else>{{ node.label }}</span>
      </div>
    </el-tree>
  </div>
</template>

<script>
import { elTree } from '../msui-utils/msui-default'
export default {
  name: 'MsuiTree',
  props: {
    options: {
      type: Object,
      default: () => {
        return {}
      }
    },
    value: {
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      key: [],
      loading: false,
      currentNodeKey: '',
      filterText: '',
      backList: []
    }
  },
  watch: {
    val: {
      handler() {
        if (this.bind.checkStrictly) {
          this.$nextTick(() => {
            let nodes = this.val.map((item) => {
              let node = this.$refs.msuiTree.getNode(item)
              if (node) {
                return node.data
              } else {
                return null
              }
            })
            this.$refs.msuiTree.setCheckedNodes(nodes)
          })
        } else {
          this.setCheckedKeys(this.val)
        }
      },
      deep: true,
      immediate: true
    },
    filterText(val) {
      this.filters(val)
    }
  },
  computed: {
    bind() {
      return Object.assign({}, elTree, this.options.bind)
    },
    vOn() {
      return this.options.vOn || {}
    },
    val() {
      return this.value || []
    },
    props() {
      if (this.options.props) {
        return this.options.props
      } else {
        return {
          children: 'children',
          label: 'label',
          key: 'id'
        }
      }
    },
    data() {
      if (this.options.data instanceof Promise) {
        this.loading = true
        this.options.data
          .then((res) => {
            this.options.data = res
          })
          .finally(() => {
            this.loading = false
          })
      } else if (this.options.data instanceof Array) {
        return this.options.data
      } else {
        return []
      }
    }
  },
  methods: {
    filters(val) {
      if(this.vOn.filter) {
        this.vOn.filter(val)
        return
      }
      this.$refs.msuiTree.filter(val)
    },
    setCurrentKey(key) {
      this.key.push(key)
      this.$refs.msuiTree.setCurrentKey(key)
    },
    handleCheckChange(val, b, c) {
      this.getCheckedKeys()
    },
    setCheckedKeys(list) {
      this.$nextTick(() => {
        this.$refs.msuiTree.setCheckedKeys(list)
      })
    },
    getCurrentNode() {
      return this.$refs.msuiTree.getCurrentNode()
    },
    getNode(key) {
      return this.$refs.msuiTree.getNode(key)
    },
    getCheckedKeys() {
      this.backList = this.$refs.msuiTree.getCheckedNodes(false, true).map((item) => item[this.props.key])
      const keyList = this.$refs.msuiTree.getCheckedKeys()
      this.$emit('input', keyList)
    },
    handleCheckAllChange(val, data = this.data) {
      if (val) {
        //如果是当前值是全选，依次遍历节点设置勾选，同时过滤的disabled为true的
        for (let i = 0; i < data.length; i++) {
          if (this.$refs.msuiTree.getNode(data[i]).disabled == false) {
            if (this.bind.checkStrictly && data[i].list.length > 0) {
              this.handleCheckAllChange(true, data[i].list)
            }
            this.$refs.msuiTree.setChecked(data[i].id, true, true)
          }
        }
      } else {
        //当前值不是全选，设置勾选列表为空
        this.$refs.msuiTree.setCheckedKeys([])
      }
    }
  }
}
</script>
<style scoped>
.tree-current {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
::v-deep .el-tree-node__content {
  height: 30px !important;
  margin-bottom: 6px;
}
</style>
